@import "./config.scss";

.b-header_box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110px;
  padding-top: 30px;
  .box_center {
    width: 1200px;
    height: 50px;
    margin: 0 auto;
    font-size: 0;

    .loginImg {
      display: inline-block;
      vertical-align: middle;
      height: 50px;
      animation: rotate 4.5s linear infinite;
    }

    @keyframes rotate {
      0% {
        transform: rotate(0);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    .logoText {
      display: inline-block;
      vertical-align: middle;
      height: 16px;
      margin-left: 14px;
    }

    ul {
      display: inline-block;
      vertical-align: top;
      margin-left: 260px;
      list-style: none;
      height: 50px;

      li {
        position: relative;
        display: inline-block;
        margin-left: 36px;
        height: 50px;
        font-size: 14px;
        line-height: 50px;
        color: #fff;
        cursor: pointer;
        &:first-child {
          margin-left: 0;
        }
        &:after {
          display: block;
          content: "";
          height: 2px;
          background: #fff;
          transform: translateY(-2px);
          opacity: 0;
          transition: ease-in-out 0.35s;
        }
        &:hover::after {
          opacity: 1;
          transform: translateY(-4px);
        }

        &:nth-child(4):hover:after {
          opacity: 0;
        }

        img {
          width: 12px;
        }
      }
    }

    .login {
      float: right;
      width: 75px;
      height: 34px;
      background: $defaultColor;
      color: #fff;
      font-size: 14px;
      display: block;
      border: none;
      outline: 0;
      cursor: pointer;
      margin-top: 8px;
    }

    .avatar {
      float: right;
      width: 50px;
      height: 50px;
      background: $defaultColor;
      border-radius: 50%;
    }

    .language {
      position: relative;
      display: inline-block;
      vertical-align: top;
      font-size: 14px;
      color: #fff;
      width: 100px;
      margin-left: 20px;
      line-height: 50px;
      cursor: pointer;
      margin-left: 20px;
      text-align: right;
      img {
        width: 12px;
        transition: transform 300ms ease;
      }
      .activeArrow {
        transform: rotate(180deg);
      }
    }
  }
  .pullbox {
    position: absolute;
    top: 46px;
    left: 0;
    width: 140px;
    background: #fff;

    // 选文件
    .pull-item {
      height: 45px;
      cursor: pointer;
      font-size: 18px;
      color: #333;
      padding-left: 20px;
    }

    // 选语言
    input[type="radio"] {
      display: none;
    }

    label {
      height: 45px;
      cursor: pointer;

      span {
        height: inherit;
        display: block;
        font-size: 18px;
        color: #333;
        text-align: left;
        padding-left: 20px;
        border-bottom: 1px solid #e4e4e4;
      }
    }
  }
}
